<!-- 有逐渐显示的效果 -->
<template>
  <text class="xhykText">
    <text class="text" ref="lineDom">
      <slot />
    </text>
    <text class="backgroundText">
      <text class="line">
        {{ domText }}
      </text>
    </text>
  </text>
</template>

<script setup>
import { ref,onMounted,nextTick,computed } from 'vue'
defineOptions({name: "xhykText"})
const props = defineProps({
  // 动画时间
  animation: {
    type: [String,Number],
    default: '10'
  },

  lineHeight: {
    type: String,
    default: '21px'
  }
})

const lineDom = ref({})
const domText = ref('')

const setColor = () => {
  nextTick(() => {
    domText.value = lineDom.value.innerHTML
  })
}

const animations = computed(() => {
  return `${parseFloat(props.animation)}s` || '10s'
})

const lineHeight = computed(() => {
  return props.lineHeight
})


onMounted(() => {
  setColor()
})
</script>

<style scoped lang='scss'>
text {
  display: inline;
  line-height: v-bind(lineHeight);
}

.xhykText {
  position: relative;
}

.backgroundText {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: 110vw;
}

.hidden {
  opacity: 0;
  position: absolute;
}

.line {
  --p: 0%;
  background: linear-gradient(
          to right,
          #0000 var(--p) ,
          #fff calc(var(--p) + 80px)
  );
  color: transparent !important;
  animation: show v-bind(animations) linear forwards;
}


@property --p {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}

@keyframes show {
  to {
    --p: 100%;
  }
}
</style>